<template>
  <!-- 2022/3/8 将之前轮播改版全屏 -->
  <div class="canvas-invite-box">
     <img v-if="isLoading" class="loading" src="../../assets/images/invite/loading.gif" alt=""/>
    <!-- 邀请卡 -->
    <div class="canvas-img-box">
      <van-icon @click="closeBtn" name="arrow-left" :color="isLoading ? '#FFFFFF': '#FFFFFF'" size="1.25rem" />
      <p :class="['canvas-tip-container',tipClass]" v-if="isShow">{{ tip }}</p>
      <canvas  class="canvas-box" ref="canvasBox" id="canvasBox" :width="cWidth" :height="cHeight" :key="new Date()"></canvas>
      <img ref="base64Img" v-if="dataUrl != '' && !isLoading" class="dataUrl"  :class="dynamicClass"  :src="dataUrl" @click="toggle" />
      <p class="canvas-btn-box" @click="toggle">点击展开<i></i></p>
    </div>
    <!-- 底部互动 -->
    <div
      class="footer-container"
      :class="isShow ? 'cardShow' : 'cardHide'"
    >
      <p class="title" @click="toggle">
        {{ plat == "app" && !isIos ? "收起截屏" : "收起" }}<i></i>
      </p>
      <ul class="footer-box">
        <li
          class="temImg tem1"
          v-for="(v, index) of currentBanner"
          @click="changeTemplate(index)"
          :key="index"
        >
          <img :src="v.smallUrl" />
          <div
            class="current-box"
            v-if="current == index ? 'current' : ''"
          ></div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
require("jr-qrcode");
import dayjs from 'dayjs';
export default {
  props: {
    postImg: String, //背景图
    txBase: String, //主题图
    liveInfo: Object, //直播间信息(主题，预告时间)
    currentBanner: Array, //当前banner
    newInviteType:Object,
    fromComPage:String,// live 直播间  back 回看
    fromCom:String, //hScreenLive横屏直播 9张 hLookBack横屏回看4张 vScreenLive竖屏直播7张 vLookBack竖屏回看4张
  },
  data() {
    return {
      ERcode: this.$lockr.get("ERcode"),
      plat: fun.getPlatform(), //app wx
      isIos,
      liveTheme: "", //主题
      liveTime: "", //预告时间
      dataUrl: "",
      tip: "", //提示语展示
      tipOne: "邀您一起观看",
      tipTwo: "微信长按二维码立即观看",
      logo: "", //机构logo
      current: null, //当前图
      isShow: true,//是否展示tip
      clockImg: require("../../assets/images/invite/clock.png"), //时间icon
      wBg: require("../../assets/images/invite/s_white.png"), //白底
      isLoading:true,
      channelRoom:'',//主播名称
      tipClass:'',
      cHeight:'',//屏幕宽度*2
      cWidth:'',//屏幕高度*2
      isFirstEnter:true,
      imgWidth:0,//图片本身宽度 仅自定义
      imgHeight:0,//图片本身高度 仅自定义
      getImgHeight:0,//等比例缩放后 图片高度 仅自定义
      getWbgHeight:0,//白色背景高度 仅自定义
      dynamicClass:'',//动态class
      shareTitle:'',//分享标题
      shareSubTitle:'',//分享副标题
    };
  },
  mounted() {
  },
  computed: {
    sysInfo() {
      //机构名称 logo
      return this.$store.state.SysOrgInfo;
    },
    nickname() {
      return this.$store.state.userInfo.nickname;
    },
    init() {
      if (this.postImg && this.txBase) {
        if (this.isFirstEnter) {
          setTimeout(() => {
            // this.startCanvas();
            this.current = 0 //画第一张图
            this.isFirstEnter = false;
          }, 1500)
        } else {
          // this.startCanvas();
          this.current = 0 //画第一张图
        }
        return true
      } else {
        return false
      }
    }
  },
  created() {
    const {name,icon} = this.$store.state.SysOrgInfo || {};		
    if(this.fromCom == 'live'){//直播间  
        const {shareTitle,shareDesc,shareIcon} = this.$store.state.orgShareObj || {};//机构分享						
				const {intro,title,shareTitel:roomShareTitel,shareSubtitle:roomShareSubtitl,shareImgurl:roomShareImgurl} = this.liveInfo;
        this.shareTitle =  roomShareTitel || title || shareTitle ||` 【 ${name} 】一起来看直播吧！`  // 分享标题
				this.shareSubTitle =  roomShareSubtitl|| intro || shareDesc ||  `精彩直播,尽在 ${name}手机直播！`  //分享描述
    }else{//回看
        const { shareTitle: orgShareTitle, shareDesc, shareIcon } = this.$store.state.orgShareObj || {};//机构分享
        const  { shareTitle, shareSubtitle, shareImgurl, subTitle, title }  = this.liveInfo;
        this.shareTitle = shareTitle || title || orgShareTitle || `【 ${name } 】精彩视频`; //分享标题
        this.shareSubTitle = shareSubtitle || subTitle || shareDesc || `精彩视频,尽在${name}手机直播！`; //分享描述
    }
    
    if (this.plat == "app" && !isIos) {
      //APP安卓环境
      this.tip = "截屏保存下方邀请卡，邀请好友来观看";
      this.tipClass= 'canvas-tip-container-screenshot'
    } else {
      this.tip = "长按保存下方邀请卡，邀请好友来观看";
      
    }
    this.liveTheme = this.liveInfo.title;
    if(this.liveInfo.beginTime){
      this.liveTime = dayjs(this.liveInfo.beginTime).format("MM月DD日 hh:mm");
    }
    this.getImgBase64(this.liveInfo.userAnchor.headImg, "logo");
    this.channelRoom = this.liveInfo.userAnchor.nickname;
    const {clientHeight,clientWidth} = document.documentElement
    this.cWidth = clientWidth*2;
    this.cHeight = clientHeight*2;
  },
  mounted() {
  },
  methods: {
    // 关闭弹窗页面
    closeBtn() {
      this.$emit("msgParent", { type: "closeInvitePage", data: "2022-3-9" });
    },
    changeTemplate(index) {
      if (this.current != index) {
        this.current = index;
        this.isLoading =true  
      }
    },
    // footer是否展示
    toggle() {
      this.isShow=!this.isShow
    },
    //全屏 邀请卡
    startCanvas() {
      let c = this.$refs.canvasBox;
      let ctx = c.getContext("2d");
     //宽高比
      const pixHeight = this.cHeight/1334;
      const pixWidth = this.cWidth/750;
      const oldPix = 424/750;
      const posterBg = new Image();
      let url = "",title;
      if (this.currentBanner[`${[this.current]}`]) {
        url = this.currentBanner[`${[this.current]}`].url;
        title = this.currentBanner[`${[this.current]}`].title;
      }
      if (url.indexOf("http") != -1) {
        //自定义背景
        posterBg.setAttribute("crossOrigin", "Anonymous");
        posterBg.src = url + "?time=" + new Date();
      } else {
        posterBg.src = url;
      }
      posterBg.onload = () => {
        if (url.indexOf("http") != -1) {//获取自定义图片
          ctx.drawImage(posterBg, 0, 0, this.cWidth, this.getImgHeight);
        } else {
          ctx.drawImage(posterBg, 0, 0, this.cWidth, this.cHeight);              
        }
        //绘制图像图片
        const TXImg = new Image();
        TXImg.src = this.txBase;
        //绘制素材图片
        const SCImg = new Image();
        TXImg.onload = () => {
          switch (title) {
            case "标准版":
              this.circleImg(ctx, TXImg, 40*pixWidth, 216*pixHeight, 58);
              if(this.$store.state.isYk && this.$channel=='msyh'){//msyh 游客去掉昵称
                  ctx.fillStyle = "#000000";
                  ctx.font = "28px Arial";
                  ctx.textAlign = "start";
                  ctx.fillText(this.tipOne, 186*pixWidth, 216*pixHeight+84); //提示
              }else{
                ctx.fillStyle = "#000000";
                ctx.font = "36px Arial";
                ctx.textAlign = "start";
                ctx.fillText(this.$store.state.userInfo.nickname, 186*pixWidth, 216*pixHeight+39); //昵称
                ctx.fillStyle = "#000000";
                ctx.font = "28px Arial";
                ctx.textAlign = "start";
                ctx.fillText(this.tipOne, 186*pixWidth, 216*pixHeight+84); //提示
              }
              
              if(!this.fromCom){//回看不展示
              //绘制时间
              ctx.fillStyle = "#999999";
              ctx.font = "24px";
              ctx.fillText(this.liveTime, 186*pixWidth, 216*pixHeight + 122);
              }
              SCImg.onload = () => {
                //素材图片
                  this.drawRoundRect(ctx, 10, 40*pixWidth, 495*pixHeight, 670*pixWidth, oldPix*670*pixWidth, SCImg)//起始   +大小 
                  const logo = new Image();//logo
                  logo.src= this.logo;
                  logo.onload = () => {
                  this.circleImg(ctx, logo, 60*pixWidth, 1035*pixHeight, 21.5);
                  ctx.fillStyle = " #333333"; //xxx直播间
                  ctx.font = "24px Arial";
                  ctx.textAlign = "left";
                  ctx.fillText(this.channelRoom, 120*pixWidth, 1035*pixHeight+30);
                  ctx.fillStyle = "#999999"; //微信扫码观看
                  ctx.font = "24px SourceHanSansCN-Medium, SourceHanSansCN";
                  ctx.textAlign = "left";
                  ctx.fillText(this.tipTwo, 60*pixWidth, 1125*pixHeight);
                  //绘制二维码
                  const ERImg = new Image();
                  let imgBase64 = jrQrcode.getQrBase64(this.ERcode, {
                    currentLevel: QRErrorCorrectLevel.L
                  });
                  ERImg.src = imgBase64;
                  ERImg.onload = () => {
                    ctx.drawImage(ERImg, 510*pixWidth, 1015*pixHeight, 198, 198);
                    let dataURL = c.toDataURL("image/png");
                    this.dataUrl = dataURL;
                    this.isLoading = false
                  };
                };
              };
              break;
            case "蓝色简约":
              //图像
              this.circleImg(ctx, TXImg, 375*pixWidth - 72, 278*pixHeight-72, 72);
              // 画图像边上的圆弧
              ctx.lineWidth = 14;//边框为10px
              ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
              ctx.beginPath();
              ctx.arc(375*pixWidth, 278*pixHeight, 78, 0, Math.PI*2, false);
              ctx.closePath();
              ctx.stroke();
              ctx.restore();
              if(this.$store.state.isYk && this.$channel=='msyh'){//msyh 游客去掉昵称
                ctx.fillStyle = "#FFFFFF";
                ctx.font = "28px Arial";
                ctx.textAlign = "center";
                ctx.fillText(this.tipOne, this.cWidth/2, 278*pixHeight+142); //提示
              }else{
                ctx.fillStyle = "#FFFFFF";
                ctx.font = "36px Arial";
                ctx.textAlign = "center";
                ctx.fillText(this.$store.state.userInfo.nickname, this.cWidth/2, 278*pixHeight+142); //昵称
                ctx.fillStyle = "#FFFFFF";
                ctx.font = "28px Arial";
                ctx.textAlign = "center";
                ctx.fillText(this.tipOne, this.cWidth/2, 278*pixHeight+192); //提示
              }
              
              SCImg.onload = () => {
                //素材图片
                this.drawRoundRect(ctx, 10, 65*pixWidth, 538*pixHeight, 620*pixWidth, oldPix*620*pixWidth, SCImg)//起始   +大小
                const logo = new Image();//logo
                  logo.src= this.logo;
                logo.onload = () => {
                  
                  this.circleImg(ctx, logo, 80, 985*pixHeight, 21.5);
                  ctx.fillStyle = "#FFFFFF"; //xxx直播间
                  ctx.font = "24px Arial";
                  ctx.textAlign = "left";
                  ctx.fillText(this.channelRoom, 140, 985*pixHeight+30);
                  ctx.fillStyle = "#FFFFFF"; //微信扫码观看
                  ctx.font = "24px SourceHanSansCN-Medium, SourceHanSansCN";
                  ctx.textAlign = "left";
                  ctx.fillText(this.tipTwo, 80, 1069*pixHeight);
                  //clock
                  const clock = new Image();
                  clock.src = this.clockImg;
                  clock.onload = () => {
                    
                    if(!this.fromCom){//回看不展示
                    ctx.drawImage(clock, 80, 1095*pixHeight, 30, 30);
                    //绘制时间
                    ctx.fillStyle = "#FFFFFF";
                    ctx.font = "24px";
                    ctx.fillText(this.liveTime, 120, 1095*pixHeight+25);
                    }
                    //绘制二维码
                    const ERImg = new Image();
                    let imgBase64 = jrQrcode.getQrBase64(this.ERcode, {
                      currentLevel: QRErrorCorrectLevel.L
                    });
                    ERImg.src = imgBase64;
                    ERImg.onload = () => {
                      ctx.drawImage(ERImg, 480*pixWidth, 950*pixHeight, 198, 198);
                      let dataURL = c.toDataURL("image/png");
                      this.dataUrl = dataURL;
                      this.isLoading = false;
                    };
                  };
                };
              };
              break;
            case "限时抢购":
              this.circleImg(ctx, TXImg, 303*pixWidth, 306*pixHeight, 72.5);
              if(this.$store.state.isYk && this.$channel=='msyh'){//msyh 游客去掉昵称
                ctx.fillStyle = "#FFFFFF";
                ctx.font = "28px Arial";
                ctx.textAlign = "center";
                ctx.fillText(this.tipOne, this.cWidth/2, 306*pixHeight + 204); //提示
             }else{
                ctx.fillStyle = "#FFFFFF";
                ctx.font = "36px Arial";
                ctx.textAlign = "center";
                ctx.fillText(this.$store.state.userInfo.nickname, this.cWidth/2, 306*pixHeight + 204); //昵称
                ctx.fillStyle = "#FFFFFF";
                ctx.font = "28px Arial";
                ctx.textAlign = "center";
                ctx.fillText(this.tipOne, this.cWidth/2, 306*pixHeight + 252); //提示
              
              }
              
              SCImg.onload = () => {
                //素材图片
                this.drawRoundRect(ctx, 10, 60*pixWidth, 588*pixHeight, 620*pixWidth, oldPix*620*pixWidth, SCImg)//起始   +大小               
                const logo = new Image();//logo
                  logo.src= this.logo;
                logo.onload = () => {
  
                  this.circleImg(ctx, logo, 80*pixWidth, 985*pixHeight, 21.5);
                  ctx.fillStyle = "#FFFFFF"; //xxx直播间
                  ctx.font = "24px Arial";
                  ctx.textAlign = "left";
                  ctx.fillText(this.channelRoom, 140*pixWidth, 985*pixHeight+30);
                  ctx.fillStyle = "#FFFFFF"; //微信扫码观看
                  ctx.font = "24px SourceHanSansCN-Medium, SourceHanSansCN";
                  ctx.textAlign = "left";
                  ctx.fillText(this.tipTwo, 80*pixWidth, 1069*pixHeight);
  
                  //clock
                  const clock = new Image();
                  clock.src = this.clockImg;
                  clock.onload = () => {
                    if(!this.fromCom){//回看不展示
                    ctx.drawImage(clock, 80*pixWidth, 1095*pixHeight, 30, 30);
                    //绘制时间
                    ctx.fillStyle = "#FFFFFF";
                    ctx.font = "24px";
                    ctx.fillText(this.liveTime, 120*pixWidth, 1095*pixHeight+25);
                    }
                    //绘制二维码
                    const ERImg = new Image();
                    let imgBase64 = jrQrcode.getQrBase64(this.ERcode, {
                      currentLevel: QRErrorCorrectLevel.L
                    });
                    ERImg.src = imgBase64;
                    ERImg.onload = () => {
                      ctx.drawImage(ERImg, 480*pixWidth, 950*pixHeight, 198, 198);
                      let dataURL = c.toDataURL("image/png");
                      this.dataUrl = dataURL;
      
                      this.isLoading = false;
                    };
                  };
                };
              };
              break;
            case "看直播赢好礼":
              // 头像
              this.circleImg(ctx, TXImg, 104, 429*pixHeight-54, 55);
                // 画图像边上的圆弧
              ctx.lineWidth = 14;//边框为14px
              ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
              ctx.beginPath();
              ctx.arc(159, 429*pixHeight, 60, 0, Math.PI*2, false);
              ctx.closePath();
              ctx.stroke();
              ctx.restore();
               if(this.$store.state.isYk && this.$channel=='msyh'){//msyh 游客去掉昵称
                  ctx.fillStyle = "#FFFFFF";
                  ctx.font = "28px Arial";
                  ctx.textAlign = "start";
                  ctx.fillText(this.tipOne, 264, 429*pixHeight+41); //提示
               }else{
                  ctx.fillStyle = "#FFFFFF";
                  ctx.font = "36px Arial";
                  ctx.textAlign = "start";
                  ctx.fillText(this.$store.state.userInfo.nickname, 264, 429*pixHeight-19); //昵称
                  ctx.fillStyle = "#FFFFFF";
                  ctx.font = "28px Arial";
                  ctx.textAlign = "start";
                  ctx.fillText(this.tipOne, 264, 429*pixHeight+41); //提示
               }
              
              SCImg.onload = () => {
                //素材图片
                 this.drawRoundRect(ctx,10, 74*pixWidth, 546*pixHeight, 604*pixWidth, oldPix*604*pixWidth, SCImg)//起始   +大小  
                const logo = new Image();//logo
                  logo.src= this.logo;
                logo.onload = () => {
                  this.circleImg(ctx, logo, 80, 985*pixHeight, 21.5);
                  ctx.fillStyle = "#FFFFFF"; //xxx直播间
                  ctx.font = "24px Arial";
                  ctx.textAlign = "left";
                  ctx.fillText(this.channelRoom, 140, 985*pixHeight+30);
                  ctx.fillStyle = "#FFFFFF"; //微信扫码观看
                  ctx.font = "24px SourceHanSansCN-Medium, SourceHanSansCN";
                  ctx.textAlign = "left";
                  ctx.fillText(this.tipTwo, 80, 1069*pixHeight);
                  //clock
                  const clock = new Image();
                  clock.src = this.clockImg;
                  clock.onload = () => {
                    if(!this.fromCom){//回看不展示
                    ctx.drawImage(clock, 80, 1095*pixHeight, 30, 30);
                    //绘制时间
                    ctx.fillStyle = "#FFFFFF";
                    ctx.font = "24px";
                    ctx.fillText(this.liveTime, 120, 1095*pixHeight+25);
                    }
                    //绘制二维码
                    const ERImg = new Image();
                    let imgBase64 = jrQrcode.getQrBase64(this.ERcode, {
                      currentLevel: QRErrorCorrectLevel.L
                    });
                    ERImg.src = imgBase64;
                    ERImg.onload = () => {
                      ctx.drawImage(ERImg, 480*pixWidth, 950*pixHeight, 198, 198);
                      let dataURL = c.toDataURL("image/png");
                      this.dataUrl = dataURL;
                      this.isLoading = false;
                    };
                  };
                };
              };
              break;
            case "建投版邀请卡":
            fun.toastMessage('新版邀请卡仅支持app');
            return
              //设置图片大小              
              this.dynamicClass = 'new-small-card';
              // 画图像边上的圆弧              
              ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';             
              SCImg.onload = () => {
                //素材图片
                fun.drawRoundRectTopRightLeft(ctx,20,0,0,600*2, 331*2, SCImg)//起始   +大小  
                    //绘制二维码
                    const ERImg = new Image();
                    let imgBase64 = jrQrcode.getQrBase64(this.ERcode, {
                      currentLevel: QRErrorCorrectLevel.H,
                      //foreground:'#ff5a00',
                    });
                    ERImg.src = imgBase64;
                    ERImg.onload = () => {
                      //绘制title
                      ctx.fillStyle = "#000000";
                      ctx.font = "76px Arial";
                      ctx.fillText(this.shareTitle.length > 14 ? this.shareTitle.slice(0,14)+'...' : this.shareTitle, 30*2, 420*2);
                      //绘制副标题
                      ctx.fillStyle = "#222630";
                      ctx.font = "52px Arial";
                      ctx.fillText(this.shareSubTitle.length > 20 ? this.shareSubTitle.slice(0,18) +'...' : this.shareSubTitle, 30*2, 470*2);
                      if(this.fromComPage == 'live'){
                        //绘制时间
                        ctx.fillStyle = "#ff5a00";
                        ctx.font = "76px Arial";
                        ctx.fillText(this.liveTime, 160*2, 552*2);
                        //绘制开播时间
                        ctx.fillStyle = "#ff5a00";
                        ctx.font = "48px Arial";
                        ctx.fillText('开播时间', 40*2, 548*2);
                        //绘制圆角矩形
                        ctx.lineWidth = 2;//边框为14px
                        ctx.strokeStyle = '#ff5a00';
                        ctx.beginPath();
                        ctx.roundRect(30*2, 520*2, 120*2, 40*2, 20);//x,y width height  rad
                        ctx.stroke();
                      }                     

                      ctx.drawImage(ERImg, 440*2, 625*2, 300, 300);
                      let dataURL = c.toDataURL("image/png");
                      this.dataUrl = dataURL;
                      this.isLoading = false;
                    };
              };
              break;
            default:
              //自定义
                const wBgs = new Image();
                wBgs.src = this.wBg;
                wBgs.onload = () => {
                  ctx.drawImage(wBgs, 0, this.cHeight-this.getWbgHeight, this.cWidth, this.getWbgHeight); //起始   +大小
                  this.circleImg(ctx, TXImg, 28, 965*pixHeight+109, 55);
                  if(this.$store.state.isYk && this.$channel=='msyh'){//msyh 游客去掉昵称
                    ctx.fillStyle = "#333333";
                    ctx.font = "28px Arial";
                    ctx.textAlign = "start";
                    ctx.fillText(this.tipOne, 170, 965*pixHeight+169); //提示
                    ctx.fillStyle = "#999999;"; //微信扫码观看
                    ctx.font = "24px SourceHanSansCN-Medium, SourceHanSansCN";
                    ctx.textAlign = "left";
                    ctx.fillText(this.tipTwo, 170, 965*pixHeight+219); 
                  }else{
                    ctx.fillStyle = "#333333";
                    ctx.font = "36px Arial";
                    ctx.textAlign = "start";
                    ctx.fillText(this.$store.state.userInfo.nickname, 170, 965*pixHeight+149); //昵称
                    ctx.fillStyle = "#333333";
                    ctx.font = "28px Arial";
                    ctx.textAlign = "start";
                    ctx.fillText(this.tipOne, 170, 965*pixHeight+199); //提示
                    ctx.fillStyle = "#999999;"; //微信扫码观看
                    ctx.font = "24px SourceHanSansCN-Medium, SourceHanSansCN";
                    ctx.textAlign = "left";
                    ctx.fillText(this.tipTwo, 170, 965*pixHeight+239); 
                  }                       
                  //绘制二维码
                  const ERImg = new Image();
                  let imgBase64 = jrQrcode.getQrBase64(this.ERcode, {
                    currentLevel: QRErrorCorrectLevel.L
                  });
                  ERImg.src = imgBase64;
                  ERImg.onload = () => {
                    ctx.drawImage(ERImg, 500*pixWidth, 1050*pixHeight, 198, 198);
                    let dataURL = c.toDataURL("image/png");
                    this.dataUrl = dataURL;
                    this.isLoading = false
                  };
                };
                
              
              break;
          }
          SCImg.src = this.postImg; //解决移动端iOS系统onload事件失效
        };
      };
    },
  async getImgWidthHeight(src, maxWaitLoad = 20000) {
    return new Promise((resolve, reject)=> {
      let img = new Image();
      img.src = src;
      if (img.complete) {
        const {width,height} = img;
        resolve({
          width,
          height
        });
      } else {
        let timeOut = setTimeout(() => {
          reject("图片加载失败！");
        },maxWaitLoad);
        img.onload = function () {
          const {width,height} = img;
          window.clearTimeout(timeOut);
          resolve({
            width,
            height
          });
        }
      }
    })
  },
    // 本地将url转成base64格式
    getImgBase64(url, source) {
      let _this = this;
      window.fun.getBase64(url, source, function(res) {
        if (source === "back") {
          _this.postImg = res; // 将结果赋值给需要用的变量属性
        } else if (source === "logo") {
          _this.logo = res;
        } else {
          _this.txBase = res;
        }
      });
    },
    /*
     *  画图片圆形 logo
     *  ctx Canvas实例
     *  img 图片地址
     *   x  x轴坐标
     *   y  y轴坐标
     *   r  弧度大小
     */
    circleImg(ctx, img, x, y, r) {
      ctx.save();
      let d = r * 2;
      let cx = x + r;
      let cy = y + r;
      ctx.arc(cx, cy, r, 0, 2 * Math.PI);
      ctx.strokeStyle = "rgba(255, 255, 255, 0)"; // 设置绘制圆形边框的
      ctx.stroke(); 
      ctx.clip();
      ctx.drawImage(img, x, y, d, d);
      ctx.restore();
    },
    /*
     *  画图片圆角 封面图
     *  ctx Canvas实例
     *  img 图片地址
     *   x  x轴坐标
     *   y  y轴坐标
     *   w  宽度
     *   h  高度
     *   r  弧度大小
     */
    drawRoundRect(ctx, r, x, y, w, h, img) {
      ctx.save();
      if (w < 2 * r) r = w / 2;
      if (h < 2 * r) r = h / 2;
      ctx.beginPath();
      ctx.moveTo(x + r, y);
      ctx.arcTo(x + w, y, x + w, y + h, r);
      ctx.arcTo(x + w, y + h, x, y + h, r);
      ctx.arcTo(x, y + h, x, y, r);
      ctx.arcTo(x, y, x + w, y, r);
      ctx.closePath();
      ctx.clip();
      ctx.drawImage(img, x, y, w, h);
      ctx.restore(); // 返回上一状态
    },
      //  画圆角矩形 自定义上时间
    fillRoundRect(cxt, x, y, width, height, radius, fillColor) {
      //圆的直径必然要小于矩形的宽高
      if (2 * radius > width || 2 * radius > height) {
        return false;
      }
      cxt.save();
      cxt.translate(x, y);
      //绘制圆角矩形的各个边
      this.drawRoundRectPath(cxt, width, height, radius);
      cxt.fillStyle = fillColor || "rgba(22, 22, 22, 0.75)"; //若是给定了值就用给定的值否则给予默认值
      cxt.fill();
      cxt.restore();
    },
    drawRoundRectPath(cxt, width, height, radius) {
      cxt.beginPath(0);
      //从右下角顺时针绘制，弧度从0到1/2PI
      cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);
      //矩形下边线
      cxt.lineTo(radius, height);
      //左下角圆弧，弧度从1/2PI到PI
      cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
      //矩形左边线
      cxt.lineTo(0, radius);
      //左上角圆弧，弧度从PI到3/2PI
      cxt.arc(radius, radius, radius, Math.PI, (Math.PI * 3) / 2);
      //上边线
      cxt.lineTo(width - radius, 0);
      //右上角圆弧
      cxt.arc(width - radius, radius, radius, (Math.PI * 3) / 2, Math.PI * 2);
      //右边线
      cxt.lineTo(width, height - radius);
      cxt.closePath();
    },
  },
  watch:{
    newInviteType: {
        handler(e) {
          if(this.newInviteType == 'newInviteSmall'){
            this.cWidth = 600*2;
            this.cHeight = 785*2;
          }
        },
        deep: true
      },
    init(){},
    current(val){
      let {url,title} = this.currentBanner[`${[val]}`]
      this.getImgHeight = 0
      this.getWbgHeight = 0
      if(title.includes('自定义')){
            //获取图片本身尺寸
          this.getImgWidthHeight(url).then(res => { 
            this.imgWidth = res.width
            this.imgHeight = res.height
            this.getImgHeight = this.cWidth*this.imgHeight/this.imgWidth //图片宽度与屏幕等宽 得到等比例缩放后图片高度 
            this.getWbgHeight = this.cHeight - this.getImgHeight  
            this.startCanvas();
          }, reason => {
            console.error(reason);
          })
      }else{
          this.startCanvas();
      }
    }

  }
  
};
</script>

<style  scoped lang="less">
.canvas-invite-box{
  height: 100vh;
  width: 100vw;
  position: relative;
  overflow: hidden;
  .canvas-img-box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
  }
  .canvas-box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    display: none;
}
.dataUrl {
  width: 100vw;
  height: 100vh;
  position: relative;
  z-index: 1;
}
.new-small-card{
  width: 600px;
  height: 785px;
  margin-bottom: 200px;
  border-radius: 20px;
}
  .footer-container {
    width: 100vw;
    height: 280px;
    position: absolute;
    left: 0;
    bottom: 0;
    height: calc(280px+ constant(safe-area-inset-bottom)); /* 兼容 IOS<11.2 */
    height: calc(280px + env(safe-area-inset-bottom)); /*兼容 IOS>11.2  */
    background: #ffffff;
    box-shadow: 0px -2px 4px 0px rgba(216, 216, 216, 0.5);
    border-radius: 30px 30px 0px 0px;
    z-index: 110 !important;
    padding-bottom: constant(safe-area-inset-bottom);/* 兼容 IOS<11.2 */
    padding-bottom: env(safe-area-inset-bottom);/*兼容 IOS>11.2  */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    .title {
      width: 100%;
      margin-top: 20px;
      font-size: 26px;
      font-weight: 400;
      color: #c5c5c5;
      line-height: 37px;
      text-align: center;
      letter-spacing: 1px;
    }
  }
}
.canvas-invite-box .title i {
  display: inline-block;
  margin-left: 16px;
  vertical-align: middle;
  height: 21px;
  width: 21px;
  background: url("../../assets/images/invite/drop_down.png") no-repeat;
  background-size: 100% 100%;
}
.canvas-invite-box .footer-box {
  width: 100%;
  height: 150px;
  margin-bottom: 40px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  overflow-x: scroll;
  li {
  position: relative;
  width: 120px;
  height: 120px;
  margin-left: 32px;
  margin-right: 8px;
  flex-shrink: 0;
  img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
}
}
.canvas-invite-box .footer-box li .current-box {
  width: 60px;
  height: 60px;
  background: url(../../assets/images/invite/check.png) no-repeat center center;
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
.canvas-invite-box .cardHide {
  z-index: 2;
  animation: cardHide 0.5s ease-out 1 forwards;
}

@keyframes cardHide {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(calc(280px+ constant(safe-area-inset-bottom)));
    transform: translateY(calc(280px + env(safe-area-inset-bottom)));
  }
}

.canvas-invite-box .cardShow {
  z-index: 2;
  animation: cardShow 0.5s ease-out 1 forwards;
}

@keyframes cardShow {
  0% {
    transform: translateY(calc(280px+ constant(safe-area-inset-bottom)));
    transform: translateY(calc(280px + env(safe-area-inset-bottom)));
  }
  100% {
    transform: translateY(0px);
  }
}
.canvas-invite-box .canvas-btn-box {
  position: absolute;
  bottom: 40px;
  width: 100vw;
  text-align: center;
  font-size: 26px;
  font-weight: 400;
  color: #ffffff;
  line-height: 37px;
  letter-spacing: 2px;
  z-index: 2;
  text-shadow: 0px 2px 4px rgba(102, 102, 102, 0.5);
  padding-bottom: constant(safe-area-inset-bottom);/* 兼容 IOS<11.2 */
  padding-bottom: env(safe-area-inset-bottom);/*兼容 IOS>11.2  */
}
.canvas-invite-box .canvas-btn-box i {
  display: inline-block;
  margin-left: 16px;
  height: 21px;
  width: 21px;
  background: url("../../assets/images/invite/expand.png") no-repeat;
  background-size: 100% 100%;
}
.canvas-invite-box .canvas-tip-container {
  position: absolute;
  top: 45px;
  left: 0px;
  right: 0px;
  margin: auto;
  width: fit-content;
  padding: 10px 20px;
  z-index: 2;
  font-size: 26px;
  font-weight: 500;
  color: #ffffff;
  background: rgba(255, 109, 60, 0.8);
  border-radius: 27px;
}
.canvas-invite-box .canvas-tip-container::before{
  content: '';
  display: inline-block;
  height: 26px;
  width: 26px;
  margin-right: 6px;
  background: url('../../assets/images/invite/download.png') no-repeat;
  background-size: 100% 100%;
  vertical-align: text-top;
}
.canvas-invite-box .canvas-tip-container-screenshot::before{
  background: url('../../assets/images/invite/screenshot.png') no-repeat;
  background-size: 100% 100%;
}
.canvas-invite-box .van-icon-arrow-left {
  position: absolute;
  top: 47px;
  left: 32px;
  z-index: 120;
}
.canvas-invite-box .loading {
  position: fixed;
  left: 0;
  right: 0;
  top: 45%;
  margin: auto;
  width: 100px;
  height: 100px;
}
</style>
